<template>
	<view class="Main">
		<view class="SearchDiv" :style="IsRuKu?'height:auto':''">
			<view class="TopDiv">
				<view class="SaoMaSearch" @click="SaoMaSearch">
					<image src="/static/icons/SaoMiao.svg" mode="" class="SaoMaSearchImg"></image>
				</view>
				<uni-search-bar @confirm="search" v-model="searchValue" @input="input" placeholder="一键查商品"
					@clear="clear" cancelButton="none" style="width: 100%;">
				</uni-search-bar>
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false" placeholder="所有">
				</uni-data-select>
			</view>
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>

		<view class="content">
			<view v-if="current === 0">
				<view class="Lists">
					<view class="List" v-for="item in ShanPinList" :key="item.barcode">
						<view class="ItemTopDiv">
							<view class="ListLeft">
								<image src="/static/icons/NoPhoto.jpg" mode="" v-if="item.imageUrl==null"></image>
								<image :src="item.imageUrl" mode="" v-else></image>
							</view>
							<view class="ListRight">
								<view class="LeftDiv">
									<view class="ListRigihtTop">
										{{ item.name }}
									</view>
									<view class="ListRigihtKuCun">
										剩余库存：{{ item.stock }}
									</view>

									<view class="ListRigihtKuCun" v-if="IsRuKu">
										零售价：{{ item.salePrice }}
									</view>
								</view>

								<view class="listRightBottom" v-if="IsRuKu==false">
									￥{{ item.salePrice }}
								</view>
							</view>
						</view>

						<view class="IsJoinAcitve">

						</view>
						<view class="Xian"></view>
						<view class="ItemBottomDiv">
							<view class="ListRigihtKuCun2">
								入货价：￥{{ item.costPrice }}
							</view>

							<button class="JoinButton" type="primary" @click="JoinButton(item)">
								{{ IsRuKu ?"加入采购":"加入活动"}}
							</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="Lists">
					<view class="List" v-for="item in YiXuanList" :key="item.barcode">
						<view class="ItemTopDiv">
							<view class="ListLeft">
								<image src="/static/icons/NoPhoto.jpg" mode="" v-if="item.imageUrl==null"></image>
								<image :src="item.imageUrl" mode="" v-else></image>
							</view>
							<view class="ListRight">
								<view class="LeftDiv">
									<view class="ListRigihtTop">
										{{ item.name }}
									</view>
									<view class="ListRightDesc">
										<view class="ListRigihtKuCun" v-if="IsRuKu">
											入货库存：{{ item.RuKuNum }}
										</view>
										<view class="ListRigihtKuCun" v-if="IsRuKu">
											总库存：{{ Number(item.RuKuNum)+Number(item.stock) }}
										</view>

										<view class="ListRigihtKuCun">
											进货价：{{ IsRuKu?item.JinHuoJia:item.costPrice }}
										</view>
										<view class="ListRigihtKuCun" v-if="IsRuKu">
											零售价：{{ item.LinSouJia }}
										</view>

										<view class="ListRigihtKuCun" v-if="!IsRuKu">
											库存：{{ item.stock }}
										</view>

										<view class="ListRigihtKuCun"
											v-if="type =='specialActivity' || type =='vip_activity'">
											活动价格：{{ item.JinHuoJia }}
										</view>

										<view class="ListRigihtKuCun"
											v-if="type =='specialActivity' || type =='vip_activity'">
											折扣：{{ item.LinSouJia }}
										</view>
									</view>

								</view>

								<view class="listRightBottom" v-if="IsRuKu==false">
									￥{{ item.salePrice }}
								</view>
							</view>
						</view>
						<view class="Xian"></view>
						<view class="ItemBottomDiv">
							<button class="JoinButton" type="primary" @click="JoinButton(item)"
								v-if="type =='specialActivity' || type =='RuKu' || type =='vip_activity'">
								{{ IsRuKu ?"修改库存":"修改活动"}}
							</button>
							<view class="ListRigihtKuCun2" v-else>
								入货价：￥{{ item.costPrice }}
							</view>
							<button class="JoinButton" type="primary" @click="PushButton(item)">
								{{ IsRuKu ?"移除入库":"移除活动"}}
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" background-color="#fff">
			<view class="PopTop">
				<view class="PopTitle">
					{{ IsRuKu ?"采购数量":"数量设置"}}
				</view>
				<view class="PopClose">
					<image src="../../../static/icons/Close.svg" mode="" class="CloseImg"></image>
				</view>
			</view>
			<view class="PopIndex">
				<view class="PopItemDiv" v-if="IsRuKu">
					<view class="PopItemTitle">
						入库数量
					</view>
					<uni-easyinput v-model="CaiGou.RuKuNum" type="number" :clearable="false"
						@input="ActiveInput3"></uni-easyinput>
					<view class="PopItemDanWei">
						个
					</view>
				</view>
				<view class="PopXian"></view>
				<view class="PopItemDiv">
					<view class="PopItemTitle">
						{{ IsRuKu ?"进货价":"活动价格（元）"}}
					</view>
					<uni-easyinput v-model="CaiGou.JinHuoJia" type="digit" :clearable="false"
						@input="ActiveInput"></uni-easyinput>
					<view class="PopItemDanWei">
						元
					</view>
				</view>
				<view class="PopXian"></view>
				<view class="PopItemDiv">
					<view class="PopItemTitle">
						{{ IsRuKu ?"零售价":"折扣（折）"}}
					</view>
					<uni-easyinput v-model="CaiGou.LinSouJia" type="digit" :clearable="false"
						@input="ActiveInput2"></uni-easyinput>
					<view class="PopItemDanWei">
						{{ IsRuKu ?"元":"折"}}
					</view>
				</view>
				<view class="PopXian"></view>
				<view class="PopItemDiv" v-if="IsRuKu">
					<view class="PopItemTitle">
						小计：
					</view>
					<view class="PopItemDanWei" style="color: black;">
						{{totalMoney}}元
					</view>
				</view>

				<view class="PopItemDiv" v-else>
					<view class="PopItemTitle">
						零售价：
					</view>
					<view class="PopItemDanWei" style="color: black;">
						{{CaiGou.salePrice}}元
					</view>
				</view>

			</view>
			<view class="PopCancel">
				<button class="ButtonCancel" @click="Cancel">取消</button>
				<button class="ButtonQueDing" @click="QueDing">确定</button>
			</view>
		</uni-popup>

		<view class="OutLogin">
			<button type="default" class="OutLoginButton" @click="NextBuZhou">确定</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				IsChoiseBuy: false, // 买送活动点进来的
				totalMoney: 0,
				CaiGou: {
					RuKuNum: 0,
					JinHuoJia: 0,
					LinSouJia: 0,
				},
				colorIndex: 0,
				activeColor: 'rgba(54, 152, 252, 1)',
				current: 0,
				styleType: 'text',
				items: ['商品库', '已选宝贝'],
				searchValue: '',

				ShanPinList: [],
				YiXuanList: [],

				range: [],
				storeId: '',
				value: '', // 类别
				Searchquery: {
					"pageNum": 1,
					"pageSize": 10,
				},
				page: 1, // 页码
				pageSize: 10, // 页面大小
				IsRuKu: false,
				Isdiscount: false,
				type: "",
			}
		},
		mounted() {
			// this.queryGoodsByBarcode("test2(该字段不能重复)")
		},
		watch: {

			YiXuanList: {
				// 此处监听obj属性a值变量
				handler(item1, item2) {
					// item1为新值，item2为旧值
					if (this.YiXuanList.length == 0) {
						this.items[1] = '已选宝贝'
					} else {
						this.items[1] = '已选宝贝 ' + this.YiXuanList.length
					}
				},
				deep: true
			},
		},
		onReachBottom() { // 下拉加载
			let allTotal = this.page * this.pageSize;
			if (allTotal < this.total) {

				this.status = 'loading'; //加载中状态

				this.page++;
				this.platformGoodsQuery(2)
			} else {

				this.status = 'noMore'; //加载完状态

			}
		},
		onLoad(option) {
			this.storeId = wx.getStorageSync("SelectMenDian")
			this.range = []
			if (option.type == "RuKu") {
				this.IsRuKu = true
				uni.setNavigationBarTitle({
					title: '添加采购商品'
				});
			} else if (option.type == "discount") {
				this.Isdiscount = true
			} else if (option.type == "toChoiseBuy" || option.type == "toChoiseSon"  ) {
				this.IsChoiseBuy = true
			}
			this.type = option.type

			this.goodsTypeQuery()
			this.page = 1
			this.platformGoodsQuery(1)
		},
		methods: {
			SaoMaSearch() {

				uni.scanCode({
					// 　　　　  onlyFromCamera: true, //为true只允许相机扫码，不加允许相册扫码
					success: (res) => {
						this.searchValue = Number(res.result)
						console.log(res)
						this.page = 1
						this.platformGoodsQuery(1)
					},
					fail: (err) => {
						console.log('扫码失败', err)
						if (err.errMsg == 'scanCode:fail cancel') {
							uni.showToast({
								title: "取消扫码",
								icon: 'none'
							});
						}
					}
				})
			},
			ActiveInput3() {
				this.totalMoney = Number(this.CaiGou.JinHuoJia) * Number(this.CaiGou.RuKuNum)
				this.$forceUpdate()
			},
			ActiveInput() {
				if (!this.IsRuKu)
					this.CaiGou.LinSouJia = Number(this.CaiGou.JinHuoJia / this.CaiGou.salePrice * 10).toFixed(2)
				else
					this.totalMoney = Number(this.CaiGou.JinHuoJia) * Number(this.CaiGou.RuKuNum)
				this.$forceUpdate()
			},
			ActiveInput2() {
				if (!this.IsRuKu)
					this.CaiGou.JinHuoJia = this.CaiGou.LinSouJia / 10 * this.CaiGou.salePrice
				else
					this.totalMoney = Number(this.CaiGou.JinHuoJia) * Number(this.CaiGou.RuKuNum)
				this.$forceUpdate()
			},
			Cancel() {
				this.$refs.popup.close()
			},
			JoinButton(item) {
				if (this.type == 'specialActivity' || this.type == 'RuKu' || this.type == 'vip_activity') {
					this.$refs.popup.open('bottom')

					this.CaiGou = item
					if (this.IsRuKu) {
						this.CaiGou.LinSouJia = item.salePrice
						this.CaiGou.JinHuoJia = item.costPrice
					}

				} else {

					this.ShanPinList.forEach((item1, index) => {
						if (item.barcode == item1.barcode) {
							if (this.IsChoiseBuy && this.YiXuanList.length >= 1) {
								uni.showModal({
									content: "买送活动只能选择一件商品"
								})
								return;
							}
							this.ShanPinList.splice(index, 1);
							this.YiXuanList.push(item)
						}
					});

				}


			},

			QueDing() {
				if (this.CaiGou.RuKuNum == 0) {
					uni.showToast({
						title: "请先填写完整",
						icon: 'none'
					});
				}
				this.ShanPinList.forEach((item1, index) => {
					if (this.CaiGou.barcode == item1.barcode) {
						this.ShanPinList.splice(index, 1);
						this.YiXuanList.push(this.CaiGou)
					}
				});
				this.CaiGou = {}
				this.$refs.popup.close()
			},
			PushButton(item) {
				this.YiXuanList.forEach((item1, index) => {
					if (item.barcode == item1.barcode) {
						this.YiXuanList.splice(index, 1);
						this.ShanPinList.unshift(item)
					}
				});
			},
			input(res) {
				console.log(res)
				let _this = this
				this.Searchquery.name = res.value
				this.page = 1
				this.platformGoodsQuery(1)
			},
			NextBuZhou() {
				if (this.IsRuKu) {
					uni.navigateBack(1)
					uni.$emit("SetYiXuanList", this.YiXuanList)

				} else {
					console.log(this.YiXuanList);
					if (this.type == "toChoiseBuy") {
						uni.navigateBack(1)
						uni.$emit("toChoiseBuyList", this.YiXuanList)
						
					} else if (this.type == "toChoiseSon") {
						uni.navigateBack(1)
						uni.$emit("toChoiseSonList", this.YiXuanList)
						
					} else if (this.type == "toDuiHuan") {
						uni.navigateBack(1)
						// uni.$emit("toDuiHuanList", this.YiXuanList)
						uni.$emit("SetDuiHuanList", this.YiXuanList)
						
					} else {
						uni.navigateBack(1)
						uni.$emit("SetYiXuanList2", this.YiXuanList)
					}

				}

			},

			change(e) {
				console.log("e:", e);
				this.value = e
				this.Searchquery.typeId = e
				this.page = 1
				this.platformGoodsQuery(1)
			},
			goodsTypeQuery() { // 类别
				this.$request(this.$api.goodsTypeQuery, null, "POST", false).then(res => {
					if (res.code == '0') {
						let b = {
							"value": '',
							"text": '所有'
						}
						this.range.push(b)
						res.data.forEach(i => {
							let a = {
								"value": i.id,
								"text": i.name
							}
							this.range.push(a)
						})

					} else {
						uni.showToast({
							title: "错误",
							icon: 'error'
						});
					}
				})
			},
			onClickItem(e) { // 切换
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			platformGoodsQuery(num = 1) { // 商家商品
				let a = {
					storeId: this.storeId,
					name: this.searchValue,
					typeId: this.value,
					"pageNo": this.page,
					"pageSize": this.pageSize,
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$request(this.$api.storeGoodsQuery, a, "POST", false).then(res => {
					uni.hideLoading();
					console.log(res)
					if (res.code == '0') {
						this.total = res.data.data.total
						if (num == 1) { // 更新
							this.ShanPinList = []
							this.ShanPinList = res.data.data.records

						}
						if (num == 2) { // push
							res.data.data.records.forEach(i => {
								this.ShanPinList.push(i)
							});
						}
					} else {
						uni.showToast({
							title: "错误",
							icon: 'error'
						});
					}
				})
			},
			clear() {
				this.Searchquery.name = ''
				// this.platformGoodsQuery(1)
			},
		}
	}
</script>

<style lang="scss">
	.SaoMaSearchImg {
		width: 50rpx;
		height: 50rpx;
	}

	.SaoMaSearch {
		width: 150rpx;
		padding: 0;
		margin-left: 20rpx;
		display: flex;
		border-radius: 5px;

		background: white;
		align-items: center;
		justify-content: center;
		padding: 5rpx 0;

	}

	.ButtonQueDing {
		width: 44vw;
		height: 80rpx;
		font-size: 30rpx;
		border-radius: 30vw;
		background: #0055ff;
		color: white;
		margin-left: 10rpx;
	}

	.ButtonCancel {
		width: 44vw;
		height: 80rpx;
		font-size: 30rpx;
		border-radius: 8vw;
		background: white;
		color: black;
		border: 2rpx solid #dedede;
		margin-right: 10rpx;
	}

	.RadioGroup1 {
		width: 95%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		gap: 14vw;
	}

	.radio {
		/* margin-right: 10vw; */
	}

	.PopXian {
		border-bottom: 3rpx solid #eaeaea;
		height: 2rpx;
		width: 91%;
	}

	.uni-easyinput__content-input {
		text-align: right;
	}

	.PopItemDanWei {
		color: #9b9b9b;
	}

	.PopItemDiv {
		display: flex;
		align-items: center;

		text-indent: 24rpx;
		color: black;
		font-size: 0.9rem;
		text-align: left;
		background-color: white;
		width: 95%;
		height: 105rpx;
		margin-right: 4vw;
	}

	.PopTip {
		color: #9b9b9b;
		font-size: 22rpx;
		margin-top: 29rpx;
		margin-bottom: 52rpx;
		width: 90%;
		line-height: 36rpx;
	}

	.PopIndex {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.PopItemTitle {
		display: flex;
		align-items: center;
		font-weight: 600;
	}

	.uni-combox__input-plac {
		font-size: 24rpx !important;
	}

	.is-input-border {
		border: 0 !important;
		background: none !important;
	}

	.PopTop {
		display: flex;
		align-items: center;
		height: 136rpx;
	}

	.PopClose {
		width: 37rpx;
		height: 37rpx;
	}

	.PopTitle {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.uni-searchbar {
		width: 68vw;
	}

	.uni-popup__wrapper {
		background: none !important;
	}

	.CloseImg {
		width: 37rpx;
		height: 36rpx;
		position: absolute;
		right: 24rpx;
		margin-bottom: 18rpx;
	}

	.PopItem {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		border-bottom: 4rpx solid #f0f0f0;
		font-size: 31rpx;
	}

	.PopCancel {
		height: 116rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		border-top: 5rpx solid #f0f0f0;
		font-size: 31rpx;
	}

	.segmented-control__text {
		font-size: 0.9rem !important;
		padding: 18rpx 40rpx !important;
	}

	.segmented-control {
		height: 80rpx !important;
	}

	.Main {
		min-height: 100vh;
		background: #f3f3f5;
	}

	.segmented-control__item {
		background: white !important;
	}

	.List {
		height: 293rpx;
		background: white;
		padding-top: 23rpx;
		margin-bottom: 20rpx;
	}

	.ListRightDesc {
		display: flex;
		flex-wrap: wrap;

		.ListRigihtKuCun {
			color: #000 !important;
			width: 40%;
		}
	}

	.ListRigihtKuCun {
		color: #cbcbcb;
		margin-top: 18rpx;
	}

	.OutLoginButton {
		width: 90%;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		color: rgba(255, 255, 255, 1) !important;
		background-color: #007afc !important;
		border-radius: 6rpx !important;
		font-size: 0.9rem;
		line-height: 150%;
		text-align: center;

	}


	.OutLogin {
		width: 100%;
		background: white;
		padding-bottom: 38rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		padding-top: 18rpx;
	}

	.ListRight {
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.ListRigihtTop {
		font-size: 32rpx;
		font-weight: 600;
	}

	.listRightBottom {
		font-size: 36rpx;
		font-weight: 600;
		/* margin-top: 18rpx; */
		color: rgba(255, 87, 51, 1);
		margin-right: 68rpx;
	}

	.Xian {
		border-bottom: 2rpx solid #e8e8e8;
		width: 96vw;
		display: flex;
		height: 2rpx;
		margin-left: 2vw;
		justify-content: center;
	}

	.content {
		padding-top: 14vh;
		padding-bottom: 10vh;
	}

	.ItemBottomDiv {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ListRigihtKuCun2 {
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-top: 18rpx;
		}
	}

	.ItemTopDiv {
		display: flex;
		align-items: center;
		padding-bottom: 15rpx;
	}

	.JoinButton {
		width: 172rpx;
		border-radius: 5vw;
		border: 2rpx solid #007afc;
		color: #007afc !important;
		height: 62rpx;
		font-size: 24rpx;
		margin: 0;
		padding: 0;
		margin-right: 29rpx;
		margin-left: 29rpx;
		margin-top: 20rpx;
		background: none !important;
	}


	.ListLeft image {
		width: 171rpx;
		height: 171rpx;
		margin-left: 39rpx;
		margin-right: 24rpx;

		color: rgba(255, 195, 0, 1);
		font-size: 36rpx;
		line-height: 150%;
		text-align: left;
		font-weight: bold;
	}

	.TopDiv {
		display: flex;
		align-items: center;
	}

	.uni-select {
		border: 0 !important;
	}

	.SearchDiv {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100%;
		background: white;
		z-index: 6;
		height: 12vh;
		padding-top: 20rpx;
		background: #1f64ff;
	}

	/* 	.uni-searchbar {
		width: auto !important;
	} */
	.uni-select {
		border: 0 !important;
		padding: 0 10rpx !important;
	}

	.uni-searchbar__box {

		display: flex !important;
		justify-content: flex-start !important;
	}

	.segmented-control {
		width: 100vw;
	}
</style>